<!--
 * @Description: 
 * @Author: yunChuangShiTai
 * @Date: 2024-01-26 11:44:09
 * @LastEditTime: 2024-07-19 15:11:16
 * @LastEditors: CAI 2246513771@qq.com
-->
<template>
  <div class="map">
    <WaterAffairsMap ref="waterAffairsMapRef"></WaterAffairsMap>
    <div class="tag">
      <div
        class="btn"
        v-for="(item, index) in btnList"
        :key="index"
        @click="listBtn(item.id)"
        :class="selectedIds.indexOf(item.id) != -1 ? 'select' : ''"
      >{{ item.btnName }}</div>
    </div>
    <displacementDialog
      :show="displacementValue"
      @close="displacementClose"
      v-if="displacementValue"
    />
    <div class="searchBox">
      <el-input
        v-model="query.name"
        class="mr-10"
        placeholder="请输入关键字"
        :prefix-icon="Search"
        style="width:200px"
      />
      <el-select v-model="query.area"  placeholder="请选择片区" style="width: 220px">
        <el-option v-for="item in areaList" :key="item.name" :label="item.name" :value="item.name" />
      </el-select>

      <el-button class="marginLeft" type="primary" :icon="Search" style="margin:0 10px">搜索</el-button>
    </div>
  </div>
</template>
<script setup>
import WaterAffairsMap from '@/components/WaterAffairsMap/index'
import displacementDialog from './components/displacementDialog'
const query = ref({
  name,
})
const btnList = ref([
  { id: 1, btnName: '管网' },
  { id: 2, btnName: '流量计' },
  { id: 3, btnName: '压力检测' },
  { id: 4, btnName: '泵站' },
  { id: 5, btnName: '水源地' },
  { id: 6, btnName: '水厂' },
  { id: 7, btnName: '水池' },
  { id: 8, btnName: '排水点位' },
])

const areaList = ref([
  {
    id: 1,
    name: '西部研发基地',
  },
  {
    id: 1,
    name: '国际金融城',
  },
  {
    id: 1,
    name: '阳光启航中心',
  },
  {
    id: 1,
    name: '花果园国际中心',
  },
  {
    id: 1,
    name: '观山湖湿地公园',
  },
  {
    id: 1,
    name: '贵阳高铁北站',
  },
  {
    id: 1,
    name: '安顺平坝社区',
  },
  {
    id: 1,
    name: '花溪大学城',
  },
  {
    id: 1,
    name: '甜蜜小镇',
  },
])
const selectedIds = ref([1])

const waterAffairsMapRef = ref(null)

const displacementValue = ref(false)

function listBtn(id) {
  if (selectedIds.value.indexOf(id) == -1) {
    selectedIds.value.push(id)
  } else {
    selectedIds.value.splice(selectedIds.value.indexOf(id), 1)
  }
  switch (id) {
    case 1:
      waterAffairsMapRef.value && waterAffairsMapRef.value.changeLineStatus()
      break
    case 2:
      waterAffairsMapRef.value &&
        waterAffairsMapRef.value.changeWaterFlowmeterStatus()
      break
    case 3:
      waterAffairsMapRef.value &&
        waterAffairsMapRef.value.changePressureDetectionStatus()
      break
    case 4:
      waterAffairsMapRef.value &&
        waterAffairsMapRef.value.changeDiancifaStatus()
      break
    case 5:
      waterAffairsMapRef.value &&
        waterAffairsMapRef.value.changeWaterSourceStatus()
      break
    case 6:
      waterAffairsMapRef.value &&
        waterAffairsMapRef.value.changeWaterPlantStatus()
      break
    case 7:
      waterAffairsMapRef.value && waterAffairsMapRef.value.changePoolStatus()
      break
    case 8:
      waterAffairsMapRef.value &&
        waterAffairsMapRef.value.changeDrainagePointStatus()
      break
  }
}

const displacementClose = (e) => {
  displacementValue.value = e
}

const state = reactive({
  hHeight: 0,
})

nextTick(() => {
  state.hHeight = document.documentElement.clientHeight - 150
  console.log(document.documentElement.clientHeight)
})

defineExpose({})
</script>

<style scoped lang="scss">
.tag {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  padding: 15px;
  background: rgba($color: #000, $alpha: 0.3);

  .btn {
    padding: 0 20px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
    color: #000000;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    background: rgba($color: #ffffff, $alpha: 0.7);

    &:hover {
      opacity: 0.7;
    }
  }

  .select {
    color: #ffffff !important;
    background-color: #1e90ff !important;
  }
}

.searchBox {
  position: absolute;
  z-index: 999;
  left: 20px;
  top: 20px;
}
</style>
